
<template>
<div class="loginWrap">
  <div class="loginBox">
    <img src="../../assets/logo/logo.png" alt="" />

    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      class="ruleForm"
    >
      <!-- 姓名 -->
      <el-form-item prop="userName">
        <el-input
          type="password"
          v-model="ruleForm.username"
          autocomplete="off"
          placeholder="请输入姓名"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>

      <!-- 地区 -->
       <el-form-item>
        <el-col :span="8">
          <el-select placeholder="省">
            <el-option label="甘肃省" value=""></el-option>
            <el-option label="海南省" value=""></el-option>
          </el-select>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="7">
          <el-select placeholder="市">
            <el-option label="兰州市" value=""></el-option>
            <el-option label="白银市" value=""></el-option>
          </el-select>
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="7">
          <el-select placeholder="县">
            <el-option label="榆中县" value=""></el-option>
          </el-select>
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-col>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item prop="telPhone">
        <el-input
          type="text"
          v-model="ruleForm.telPhone"
          autocomplete="off"
          placeholder="请输入手机号"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item prop="getCode" class="passInput">
        <el-input
          type="tel"
          v-model="ruleForm.getCode"
          autocomplete="off"
          placeholder="请输入验证码"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
          <el-button class="getCodeBtn">获取验证码</el-button>
        </el-form-item>

        <!-- 密码-1 -->
        <el-form-item prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
          placeholder="请输入密码"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>

      <!-- 密码-2 -->
      <el-form-item prop="checkPass" class="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          autocomplete="off"
          placeholder="请确认密码"
        >
          <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
        </el-input>
      </el-form-item>

      <!-- 验证码链接 -->
      <el-row>
        <router-link to="login" class="codeLogin">
          账号密码登录
        </router-link
        >
      </el-row>

      <!-- 登录按钮 -->
      <el-row>
        <el-button type="primary" class="submitBtn" @click="submitForm('ruleForm')">提交</el-button>
      </el-row>

      <!-- 注册 and tip -->
      <el-row>
          <router-link to="login" class="registerBtn">已有账号，点击登录</router-link></el-col>
          <router-link to="latecomer" class="tipBtn">
          <strong>Latecomer</strong><span>是什么？</span></router-link>
      </el-row>
    </el-form>
  </div>
</div>
</template>
<script>
export default {
  data() {
    // 用户名
    var validatorUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
    };
    // 密码
    var validatorPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入验证码"));
      } else if (value.length <= 6) {
        return callback(new Error("请输入正确的二维码"));
      }
    };

    return {
      ruleForm: {
        userName: "",
        telPhone: "",
        getCode: "",
        passWord: "",
        checkPass: ""
      },
      rules: {
        userName: [{ validator: validatorUser, trigger: "blur" }],
        passWord: [{ validator: validatorPass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped lang="less">
.fontLine {
  height: 40px;
  line-height: 40px;
  text-decoration: none;
}
.loginWrap {
  width: 100%;
  height: 100vh;
  background-color: #2d3a4b;
}
.loginBox {
  position: relative;
  width: 420px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
  > img {
    width: auto;
    .fontLine();
    margin: 15px auto;
  }
  .codeLogin {
    display: block;
    float: right;
    .fontLine();
    color: #999;
    font-size: 14px;
    text-decoration: none;
  }
  .passInput .el-input {
    float: left;
    width: calc(100% - 120px);
  }
  .passInput {
    width: 100%;
    margin-bottom: 22px;
  }

  .submitBtn {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .registerBtn {
    float: left;
    .fontLine();
    color: #409eff;
  }
  .tipBtn {
    float: right;
    .fontLine();
    strong {
      color: #0099df;
      margin-right: 5px;
      font-size: 16px;
    }
    span {
      color: #999;
      font-size: 16px;
    }
  }
}
.checkPass{
  margin-bottom: 0px;
}
.el-form-item__error {
  line-height: 30px;
}
html,
body {
  height: 100vh;
  background: #999;
}
</style>

<style lang="less">
.el-form-item__content input {
  &:focus {
    border-color: #9e9e9e !important;
  }
}
.el-form-item.is-error .el-input__inner {
  border-color: #9e9e9e !important;
}

.passInput .getCodeBtn {
  float: right;
  width: 112px;
  display: inline-block;
}
</style>